<template>
    <div id="myInfoWindow" >
      <div class="white-font" @click="showNewData()">是一个{{ name }}</div>
      <div class="white-font">
        {{ position[0] }}---{{ position[1] }}
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  let props = defineProps<{
    name: string;
    position: number[];
  }>();
  
  let showNewData = ()=>{
    console.log(props.name);
  }
  </script>
  
  <style scoped lang="scss">
  .info-content{
      width: 300px;
      height: 100px;
      background-color: #666;
  }
  #myInfoWindow {
    padding: 5px;
    width: 200px;
    border-radius: 4px;
    background-color: rgba(34, 34, 34);
    box-shadow: 0 0 8px #00000099;
    font-size: 12px;
    :deep(canvas) {
      pointer-events: none;
    }
    .dia-close-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      cursor: pointer;
    }
  }
  .white-font{
    color: #fff;
    font-size: 14px;
    &:hover{
      cursor: pointer;
    }
  }
  </style>  